<template>
    <div class="con">
        <div>
            <h1 id="know">宠物信息</h1>
        </div>
        <div class="content">
            
            <!-- 遍历标题 -->
            <div v-for="item in info" :key="item.Xid" v-if="item.Xid===id" class="title">{{item.Intitle}}</div>
            <div v-for="item in info" :key="item.Xid" v-if="item.Xid===id" class="essay">{{item.ChXin}}</div>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    export default {

        data() {
            return {
                id: this.$route.params.id,
                index: 0,
                info: []
            }
        },
        mounted() {
            var _this = this;
            axios.get("http://localhost:3000/api/petAbout")
                .then(res => {
                    console.log("获取数据成功");
                    console.log(res);
                    _this.info = res.data;
                    console.log(_this.info)

                })
                .catch(err => {
                    console.log('获取数据失败' + err);
                })

        }

    }
</script>

<style scoped>
    .con{
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
    }
     .content {
        display: flex;
        /* height: 2000px; */
        /* width: 100%; */
        /* border: solid black 3px; */
        flex-direction: column;
        /* border: solid red 3px; */
        border-radius: 50px;
        border: dashed rgba(249, 151, 167, 0.862) 6px;
        background-color: #ffffff;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;

    }
    #know {

        display: flex;
        float: left;
        margin-top: 1%;
        margin-left: 3%;
        font-family: 楷体;
        color: pink;
        font-weight: bolder;

    }

    .essay {
        /* border: dashed greenyellow 3px; */
        text-indent: 2em;
        font-size: 200%;
        font-family: 隶书;
        margin: 5%;
    }

    .title {
        margin-top: 2%;
        /* border: dashed greenyellow 3px; */
        text-indent: 2em;
        font-size: 200%;
        font-family: 隶书;
        text-align: center;
    }
    @media screen and (max-width:768px){
            /* 手机屏幕 */
    
     .content{
        zoom:0.5;
         }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */

           
    }
</style>